<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>联系人管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-dialog title="导入文件" :visible.sync="importMaterBom">
        <el-upload
          class="upload-demo"
          drag
          action='/api/link/imporExcel'
          :on-success="updateMater"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
        </el-upload>
      </el-dialog>
      <el-card class="box-card2">
        <el-form :model="piLinkman" class="demo-form-inline" >
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="5">
                <el-input placeholder="联系人姓名" v-model="piLinkman.name"></el-input>
              </el-col>
              <el-select v-model="piLinkman.customerId" placeholder="请选择客户">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              &nbsp;&nbsp;&nbsp;
              <el-button  plain type="info" @click="mohu" class="btn"  icon="el-icon-search">搜索</el-button>
              <el-button  type="primary" @click="addLinkMan" class="btn">添加联系人</el-button>
              <el-button @click="importMaterBom=true" type="info" class="btn"><i class="el-icon-upload2 el-icon--right"></i>导入</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-button @click="exportExcel" type="info" class="btn"><i class="el-icon-download el-icon--right"></i>导出</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
      <el-row class="box"></el-row>
      <el-card class="box-card">
      <el-table
        :data="roleList"
        style="width: 100%">
        <el-table-column
          label="角色名称"
          prop="name"
          width="180">
        </el-table-column>
        <el-table-column
          label="性别"
          width="180">
          <template slot-scope="scope">
            {{scope.row.sex==1?'男':'女'}}
          </template>
        </el-table-column>
        <el-table-column
          label="电话号码"
          prop="tel"
          width="180">
        </el-table-column>
        <el-table-column
          label="邮箱"
          prop="email"
          width="180">
        </el-table-column>
        <el-table-column
          label="职位"
          prop="position"
          width="180">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-popover placement="right" width="200" trigger="click">
              <el-button @click="delOne(scope.row.id)" type="danger"><i class="el-icon-delete" circle></i></el-button><!--删除按钮-->
              <el-button @click="seeAll(scope.row.id)" type="primary"><i class="el-icon-edit" circle></i></el-button><!--修改按钮-->
              <el-button slot="reference" type="text">更多操作</el-button>
            </el-popover>
<!--            <el-button  size="small" type="text" @click="seeAll(scope.row.id)">编辑</el-button>-->
<!--            <el-button  size="small" type="text" @click="delOne(scope.row.id)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      </el-card>
    </div>
</template>

<script>
  export default {
    name: 'LinkMan',
    data(){
      return{
        importMaterBom:false,
        options:[
        ],
        piLinkman:{
          name:null
        },
        roleList:[],
        page:{
          pagenum:0,
          pagesize:5
        },
        total:0,
        roleForms:{}
      }
    },
    methods:{
      exportExcel:function(){
        location.href='http://localhost:8080/link/exportExcel';
      },
      updateMater:function(){
        this.flushMan()
      },
      addLinkMan:function(){
        this.$router.push("/linkAdd")
      },
      getCust:function(){
        this.$http.get("/customer/getCustom").then((res)=>{
          this.options=res.data.result
        })
      },
      delOne:function(a){
        this.$http.delete("/link/delOne/"+a).then((res)=>{
          if(res.data.success){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          }else {
            this.$message.error(res.data.message);
          }
          this.flushMan()
        })
      },
      seeAll:function(a){
        this.$router.push({path:'/linkUpdate',query:{id:a}})
      },
      handleSizeChange: function (val) {
        this.page.pagesize = val;
        this.flushMan();
      },
      handleCurrentChange: function (val) {
        this.page.pagenum = val;
        this.flushMan();
      },
      flushMan:function () {
        this.$http.put("/link/getLinkMan/"+this.page.pagenum+"/"+this.page.pagesize,this.piLinkman).then((res) => {
          this.roleList=res.data.result.list
          this.total = res.data.result.total
        });
      },
      mohu:function () {
        this.flushMan()
      }
    },
    mounted () {
      this.flushMan()
      this.getCust()
    }
  }
</script>

<style scoped>
  .box-card2{/*搜索框的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .btn{/*按钮的圆角样式*/
    border-radius: 30px;
  }
</style>
